<template>
<!-- A marketing page card built entirely with utility classes -->
<div class="md:flex bg-white p-10">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUpdated, onUnmounted } from 'vue'
import { useWebSocket } from '@vueuse/core'

interface Book {
  title: string;
  author: string;
  year: number;
}
export default defineComponent({
  name: 'workplace',
  props: {},
  data() {
    return {
      book: {
        title: 'Vue 3 Guide',
        author: 'Vue Team',
        year: 2020
      } as Book
    }
  },
  setup() {
    onMounted(() => {
      const { open, send } = useWebSocket('ws://127.0.0.1:2345', {
        onConnected() {
          console.log('连接成功')
        },
        onMessage(ws, event) {
          console.log(event)
          console.log('接受到消息')
        },
        heartbeat: {
          message: 'ping',
          interval: 1000
        },
        autoReconnect: {
          retries: 3,
          delay: 1000,
          onFailed() {
            alert('Failed to connect WebSocket after 3 retires')
          }
        }
      })
      open()
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    return {}
  }
})
</script>
